<template>
  <div ref="refChart" :style="{ height: kHOne * 2 + 'px'}"></div>
</template>

<script>
import theme from '../../assets/theme/theme'
import {getComplexJson} from '../../api'

export default {
  name: 'C7',
  inject: ['getMyData'],
  computed: {
    myData() {
      return this.getMyData().chartFive;
    }
  },
  data() {
    return {
      chartInstance: null,
      allData1: [],
      allData2: [],
      allData3: [],
      allData4: [],
      kHOne: null,
      // 自适应浏览器获取宽高大小定时器
      screenTimer: null,
      // 局部刷新定时器
      dataTimer: null,
      // 获取浏览器可视区域高度（包含滚动条）、 window.innerHeight
      // 获取浏览器可视区域高度（不包含工具栏高度）、document.documentElement.clientHeight
      // 获取body的实际高度  (三个都是相同，兼容性不同的浏览器而设置的) document.body.clientHeight
      screenHeight: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
      screenWidth: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    }
  },
  beforeMount() {
    this.kHOne = Math.round(this.screenHeight * 0.46)
  },
  mounted() {
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发
    window.addEventListener('resize', this.getScreenWidth, false);
    // 自适应浏览器获取宽高大小定时器
    this.resizeScreen();
    // 图表初始化
    this.initChart();
    // 获取接口数据
    // this.getData();
    // 调用Echarts图表自适应方法
    this.screenAdapter();
    // Echarts图表自适应
    window.addEventListener("resize", this.screenAdapter);
    // 局部刷新定时器
    this.getDataTimer();
  },
  beforeDestroy() {
    // 销毁Echarts图表
    this.chartInstance.dispose();
    this.chartInstance = null;
  },
  destroyed() {
    // 清除自适应屏幕定时器
    clearInterval(this.screenTimer);
    this.screenTimer = null;
    // 清除局部刷新定时器
    clearInterval(this.dataTimer);
    this.dataTimer = null;
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenHeight, false);
    // 页面大小改变时触发销毁
    window.removeEventListener('resize', this.getScreenWidth, false);
    // Echarts图表自适应销毁
    window.removeEventListener("resize", this.screenAdapter);
  },
  methods: {
    // 自适应浏览器获取宽高大小定时器
    resizeScreen() {
      this.screenTimer = setInterval(() => {
        this.getScreenHeight();
        this.getScreenWidth();
      }, 200)
    },
    // 获取浏览器高度进行自适应
    getScreenHeight() {
      this.screenHeight = window.innerHeight || document.documentElement.innerHeight || document.body.clientHeight;
      this.kHOne = Math.round(this.screenHeight * 0.46);
    },
    // 字体大小根据宽度自适应
    getScreenWidth() {
      this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    },
    initChart() {
      var myChart = this.$echarts.init(this.$refs.refChart, theme, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var initOption;
      setTimeout(function () {
        initOption = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source: [
              ['product', '2022', '2023', '2024', '2025', '2026', '2027'],
              ['企业基本信息查询', 950, 520, 1030, 340, 1150, 300],
              ['企业变更信息查询', 230, 530, 710, 350, 460, 200],
              ['自然人关联信息查询', 430, 540, 750, 1360, 470, 1000],
              ['企业股东信息查询', 240, 650, 760, 370, 980, 400],
              ['企业股东信息查询', 350, 560, 770, 380, 490, 500],
              ['企业税务信息征收查询', 170, 580, 390, 500, 510, 600],
              ['批量基本信息查询', 270, 580, 290, 400, 520, 700],
              ['批量自然人关联信息查询', 590, 900, 410, 930, 790, 800],
              ['批量股东信息查询', 490, 500, 310, 420, 420, 900],
              ['批量变更事项查询', 100, 510, 320, 440, 430, 500],
              ['批量欠税公告信息查询', 310, 1020, 330, 440, 790, 500]
            ]
          },
          xAxis: {type: 'category'},
          yAxis: {gridIndex: 0},
          grid: {top: '55%'},
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: {focus: 'series'}
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '15%',
              center: ['50%', '32%'],
              // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
              avoidLabelOverlap: true,
              itemStyle: {
                // 用于指定饼图扇形区块的内外圆角半径，支持设置固定数值或者相对于扇形区块的半径的百分比值。
                borderRadius: 2,
                borderColor: '#fff',
                // 描边线宽。为 0 时无描边。
                borderWidth: 1
              },
              // 高亮状态的扇区和标签样式。
              emphasis: {
                label: {
                  show: true,
                  fontSize: '16',
                  fontWeight: 'lighter'
                }
              },
              label: {
                formatter: '{b}:{@2022}:({d}%)',
                color: 'white',
                fontSize: 10
                // show: false,
                // // 标签的位置
                // position: 'center',
                // // 当前百分比
                // // formatter: '{d}%',
                // color: 'white',
                // fontStyle: 'oblique'
              },
              // 是否显示视觉引导线。
              labelLine: {
                show: false,
                lineStyle: {
                  type: "dashed",
                  width: 20
                }
              },
              encode: {
                itemName: 'product',
                value: '2022',
                tooltip: '2022'
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(initOption);
      });
      if (initOption && typeof initOption === 'object') {
        myChart.setOption(initOption);
      }
    },
    screenAdapter() {
      this.titleFontSize = Math.round(this.$refs.refChart.offsetWidth / 30);
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        // 圆点分类标题
        legend: {
          textStyle: {
            fontSize: Math.round(this.titleFontSize * 0.8),
          },
        },
        xAxis: {
          //  改变x轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
        yAxis: {
          //  改变y轴字体颜色和大小
          axisLabel: {
            textStyle: {
              fontSize: Math.round(this.titleFontSize * 0.7),
            },
          },
        },
      };
      // 图表自适应变化配置
      this.chartInstance.setOption(adapterOption);
      this.chartInstance.resize();
    },
    // 定时器
    getDataTimer() {
      this.dataTimer = setInterval(() => {
        // 执行刷新数据的方法
        // this.getData();
      }, 5000)
    }
  }
}
</script>
